<template>
  <div id="moduleLayout" :class="[header==='Version2'?'Version2':'']">
    <div class="header-content" >
      <portal-header-version1></portal-header-version1>
    </div>
    <div class="body-content">
      <div class="track" :class="[mode==='card'?'card':'module']">
        <section class="flip-page" :class="[mode==='module'?'opend':'']">
          <div v-if="mode==='pending'" class="pending-box">
            <div class="c-slack">
              <span class="c-slack__dot c-slack__dot--a"></span>
              <span class="c-slack__dot c-slack__dot--b"></span>
              <span class="c-slack__dot c-slack__dot--c"></span>
              <span class="c-slack__dot c-slack__dot--d"></span>
            </div>
          </div>
          <router-view></router-view>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import ModuleWorkplace from '@/views/portal/ModuleWorkplace'
import { PortalHeader, PortalHeaderVersion1, CardMarket } from '@/components'
import PortalLayout from '@/layouts/PortalLayout'
import { mapGetters, mapMutations } from 'vuex'
import { initDojo } from './gisMap'
export default {
  name: 'ModuleLayout',
  components: { PortalHeader, PortalHeaderVersion1, CardMarket, ModuleWorkplace, PortalLayout },
  beforeRouteEnter (to, from, next) {
    console.log('ModuleLayout beforeRouteEnter')
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    initDojo().then(async () => {
      next()
    })
  },
  data () {
    return {
      mode: 'module'
    }
  },
  watch: {
  },
  created () {
    this.header = this.userInfo.style
    this.mode = this.$route.meta.mode || 'module'
  },
  mounted () {
  },
  computed: {
    ...mapGetters({
    }),
    ...mapGetters(['userInfo'])
  },
  methods: {
    ...mapMutations({
    }),
    log (msg) {
      console.log(msg)
    }
  },
  destroyed () {
  }
}
</script>

<style lang="less">
@import "./ModuleLayout.less";
</style>
